<script>
export default {
  data() {
    return {
      dialogVisible: false,
      mfily: [],
      dewllerss: [],
      form: {},
      selectedTags: [],
      my: {
        phone: '',
        identity: '',
      },
      tableData: [],
      agform: [],
      teams: [],
      packs: [],
      doctors: [],
      addresses: [],
      sources: [],
      notes: '',
      myst: {},
      echo: {},
      zbid: '111111111',
      url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
      dwid: '',
      isPhoneValid: false,
      isIdentityValid: false,
      // 其他数据
      rules: {
        phone: [
          {required: true, message: '请输入手机号', trigger: 'blur'},
          {pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur'}
        ],
        identity: [
          {required: true, message: '身份证号不能为空', trigger: 'blur'},
          {pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, message: '请输入正确的身份证号', trigger: 'blur'}
        ],
      }
    };
  },
  watch: {
    'echo.phone':{
      handler() {
        this.validatePhoneNumber();
      },
      immediate: true
    },
    'echo.identity': {
      handler() {
        this.validateIdentity();
      },
      immediate: true
    },
  },
  methods: {
    validateIdentity() {
      const cation = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
      this.isIdentityValid = cation.test(this.echo.identity)
    },
    validatePhoneNumber() {
      const phoneRegex = /^1[3-9]\d{9}$/;
      this.isPhoneValid = phoneRegex.test(this.echo.phone);
    },
    findUpdate(){
      this.id =JSON.parse(localStorage.getItem("id"))//获取浏览器地址栏传递过来的id
      this.axios.get(`http://localhost:9000/b/stables/findUpdate/${this.id}`).then(res=>{
        this.echo=res.data.data;
        this.dwid = this.echo.dewid;
        console.log(res.data.data)
      })
    },
    submit() {
      if(this.isPhoneValid){
        if(this.isIdentityValid){
          this.my.label = this.selectedTags.join(",");
          this.axios.post(`http://localhost:9000/b/stables/UpdateStales`, this.echo).then(res => {
            this.axios.post(`http://localhost:9000/b/stables/UpdateDwellers/${this.dwid}`,this.echo).then(res => {
              this.$message({
                message: '更改成功',
                type: 'success'
              });
            })
          });
          setTimeout(() => {
            this.$router.go(-1);
          }, 1000);
        }else{
          this.$message({
            message: '身份证号不正确',
            type: 'error',
          });
        }
      }else{
        this.$message({
          message: '请输入正确的手机号',
          type: 'error',
        });
      }
    },


    tan() {
      this.dialogVisible = true;
    },

    confirm() {
      this.dialogVisible = false;
      // 提交处理逻辑
    },
    getDwellers() {
      // 获取所有居民数据
      this.axios.post(`http://localhost:9000/b/dwellers/list`).then(res => {
        this.dewllerss = res.data.data;
      });
    },

    getMfily() {
      // 获取所有家庭成员数据
      this.axios.post(`http://localhost:9000/b/mfily/list`).then(res => {
        this.mfily = res.data.data;
      });
    },
    getAg() {
      this.axios.post(`http://localhost:9000/b/agencies/list`).then(res => {
        this.agform = res.data.data;
      })
    },
    getTimes() {
      this.axios.post(`http://localhost:9000/b/team/list`).then(res => {
        this.teams = res.data.data;
      })
    },
    getPacks() {
      this.axios.post(`http://localhost:9000/b/packs/list`).then(res => {
        this.packs = res.data.data;
      })
    },
    getAddress() {
      this.axios.post(`http://localhost:9000/b/address/list`).then(res => {
        this.addresses = res.data.data;
      })
    },
    getDoctor() {
      this.axios.post(`http://localhost:9000/b/doctor/list`).then(res => {
        this.doctors = res.data.data;
      })
    },
    getSource() {
      this.axios.post(`http://localhost:9000/b/source/list`).then(res => {
        this.sources = res.data.data;
      })
    },
    goBack() {
      this.$router.go(-1); // 返回上一页
    },
  },
  created() {
    this.getDwellers();
    this.getMfily();
    this.getAg();
    this.getTimes();
    this.getPacks();
    this.getDoctor();
    this.getAddress();
    this.findUpdate();
  }
};
</script>

<template>
  <div class="container">
    <h4 class="section-title">编辑服务信息</h4>
    <el-divider></el-divider>
    <h6 class="sub-title">居民信息</h6>
    <el-form :inline="true" :model="echo" class="demo-form-inline">

      <el-form-item label="姓名" >
        <el-input v-model="echo.dewname" readonly></el-input>
      </el-form-item>

      <el-form-item label="身份证号" prop="identity" :rules="rules.identity" ref="formRef">
        <el-input v-model="echo.identity"></el-input>
      </el-form-item>

      <el-form-item label="性别">
        <el-select v-model="echo.sex" placeholder="请选择性别">
          <el-option label="男" :value="1"></el-option>
          <el-option label="女" :value="0"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="出生年月">
        <el-date-picker
            type="date"
            placeholder="选择出生年月"
            v-model="echo.birthday"
            style="width: 100%"
        ></el-date-picker>
      </el-form-item>

      <el-form-item label="联系电话" prop="phone" :rules="rules.phone" ref="formRef">
        <el-input v-model="echo.phone"></el-input>
      </el-form-item>

      <el-form-item label="现居地">
        <el-input v-model="echo.current" placeholder="请输入"></el-input>
      </el-form-item>

      <el-form-item label="居民标签">
        <el-select v-model="selectedTags" multiple placeholder="请选择">
          <el-option label="慢病护理" value="慢病护理"></el-option>
          <el-option label="高血压" value="高血压"></el-option>
          <el-option label="高血糖" value="高血糖"></el-option>
          <el-option label="糖尿病" value="糖尿病"></el-option>
          <el-option label="脑卒中" value="脑卒中"></el-option>
          <el-option label="嘉辉病" value="嘉辉病"></el-option>
          <el-option label="玉玉症" value="玉玉症"></el-option>
          <el-option label="抑郁症" value="抑郁症"></el-option>
          <el-option label="脑梗" value="脑梗"></el-option>
          <el-option label="风湿" value="风湿"></el-option>
          <el-option label="新冠" value="新冠"></el-option>
        </el-select>
      </el-form-item>

      <div class="info-item" style="width: 100%;">
        <div class="header" style="width: 100%;">
          <div class="title" style="margin-left: 358px">家庭成员</div>
          <div class="card">
            <el-avatar :src="url"></el-avatar>
            <div class="info">
              <div class="name-age">
                <span class="name">{{ echo.mname }}</span>
                <span class="age"><span style="padding-left: 10px">{{ echo.fage }}</span>岁</span>
                <span class="icon">🌟</span>
              </div>
              <div class="relation">关系：{{ echo.gx }}</div>
            </div>
          </div>
        </div>
      </div>
    </el-form>

    <el-divider></el-divider>
    <h6 class="sub-title">服务信息</h6>
    <el-form :model="echo" class="demo-form">
      <el-form-item label="编号">{{echo.number}}
      </el-form-item>

      <el-form-item label="服务机构" clearable>
        <el-select v-model="echo.ageid" placeholder="服务机构">
          <el-option label="全部" value=""></el-option>
          <el-option v-for="item in agform" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="服务团队" clearable>
        <el-select v-model="echo.tid" placeholder="服务团队">
          <el-option label="全部" value=""></el-option>
          <el-option v-for="item in teams" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="服务医生" clearable>
        <el-select v-model="echo.did" placeholder="服务医生">
          <el-option label="全部" value=""></el-option>
          <el-option v-for="item in doctors" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="服务项目" clearable>
        <el-select v-model="echo.project" placeholder="服务项目">
          <el-option label="全部" value=""></el-option>
          <el-option label="血糖监测" value="血糖监测"></el-option>
          <el-option label="血压检测" value="血压检测"></el-option>
          <el-option label="体检" value="体检"></el-option>
          <el-option label="其他" value="其他"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="服务地点" clearable>
        <el-select v-model="echo.aid" placeholder="服务地点">
          <el-option label="全部" value=""></el-option>
          <el-option v-for="item in addresses" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="服务时间">
        <el-date-picker
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetime"
            placeholder="选择服务时间"
            v-model="echo.shours"
            style="width: 100%"
        ></el-date-picker>
      </el-form-item>

      <el-form-item label="服务备注" clearable>
        <el-input type="textarea" v-model="echo.notes" placeholder="请输入服务备注"></el-input>
      </el-form-item>

      <div class="form-actions" style="text-align: left">
        <el-button type="primary" @click="submit">提交审核</el-button>
        <el-button @click="goBack">返回</el-button>
      </div>
    </el-form>


    <!--弹框-->
    <el-dialog title="关联家庭成员" :visible.sync="dialogVisible" width="30%">
      <el-form ref="form" :model="my">
        <el-form-item label="选择成员" required>
          <el-select v-model="my.mid" placeholder="请选择">
            <el-option
                v-for="item in mfily"
                :key="item.id"
                :label="`${item.name} ${item.fsex==1?'男':'女'} ${item.fage}岁`"
                :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选择关系" required>
          <el-select v-model="my.mid" placeholder="请选择">
            <el-option
                v-for="item in mfily"
                :key="item.id"
                :label="`${item.gx}`"
                :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<style scoped>
.container {
padding: 20px;
background-color: #f5f5f5;
border-radius: 8px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
max-width: 1200px; /* 限制最大宽度 */
margin: 0 auto; /* 居中对齐 */
}

.section-title {
font-size: 26px;
color: #333;
}

.sub-title {
font-size: 20px;
color: #555;
}

.demo-form-inline,
.demo-form {
margin-bottom: 20px;
background-color: #fff;
padding: 30px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.form-actions {
text-align: right;
margin-top: 20px;
}

.dialog-footer {
text-align: right;
}

.info-item {
display: flex;
flex-direction: column;
margin-bottom: 20px; /* 加入底部间距 */
}

.card {
border: 1px solid #e0e0e0;
border-radius: 8px;
padding: 10px;
display: flex;
align-items: center;
background-color: #fff;
}

.info {
margin-left: 10px;
}

.name-age {
display: flex;
align-items: center;
}

.name {
font-size: 16px;
font-weight: bold;
color: #333;
}

.age {
font-size: 14px;
color: #888;
}

.icon {
margin-left: 5px;
color: #4caf50;
}

.relation {
font-size: 14px;
color: #999;
margin-top: 5px;
}

.header {
  display: flex;
  align-items: center;
}

.title {
  font-size: 16px;
  font-weight: bold;
  margin-right: 10px; /* 使标题和卡片之间有间距 */
}


</style>

